<template>
	<view class="common-container">
		<view class="status_bar"> </view>
		<u-navbar title="联系人" @leftClick="handleLeftClick"></u-navbar>
		<view class="main-wrap has-navbar-tabbar">
			<view class="user-info-base">
				<u-image :showLoading="true" shape="circle" :src="$constants.getFileView(user.avatar)" width="4.5rem"
					height="4.5rem"></u-image>
				<view class="user-name">
					{{ user.realName }}/{{ user.userName }}
				</view>
				<view class="user-desc">
					<span v-for="item in organizations" :key="item.id" class="item">{{ item.organizationName }}</span>
				</view>
				<view class="user-icon-link">
					<view class="item">
						<u-icon name="phone" size="2rem" @click="handlePhone"></u-icon>
					</view>
					<view class="item">
						<u-icon name="email" size="2rem" @click="handleSendSms"></u-icon>
					</view>
				</view>
			</view>
			<view class="user-info-detail">
				<u-cell-group :border="false">
					<u-cell title="手机号">
						<template slot='value'>
							{{ user.mobile?user.mobile:'未填写' }}
						</template>
					</u-cell>
					<u-cell title="座机号">
						<template slot='value'>
							{{ user.phone?user.phone:'未填写' }}
						</template>
					</u-cell>
					<u-cell title="邮箱">
						<template slot='value'>
							{{ user.email?user.email:'未填写' }}
						</template>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				organizations: [],
				itemRoles: []
			}
		},
		onLoad(options) {
			this.fetchUserDetails(options.id)
		},
		methods: {
			handleLeftClick() {
				uni.switchTab({
					url: '/pages/mailList/index'
				})
			},
			handlePhone() {
				uni.makePhoneCall({
					phoneNumber: this.user.mobile,
					success() {
						console.log("拨打成功")
					},
					fail() {
						console.log("拨打失败")
					}
				})
			},
			handleSendSms() {
				let msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS)
				msg.to = [this.user.mobile]
				msg.body = '请输入短信内容'
				plus.messaging.sendMessage(msg)
			},
			fetchUserDetails(id) {
				//id = '577281994881986561'
				this.$store.dispatch('getUserDetailsById', id).then(res => {
					console.log(res)
					this.user = res.user
					this.organizations = res.organizations
					this.itemRoles = res.roles
				}).catch((_) => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-info-base {
		margin-top: 1.875rem;
		text-align: center;

		::v-deep .u-image {
			margin: 0 auto;
		}

		.user-name {
			color: #000;
			margin-top: .875rem;
		}

		.user-desc {
			color: #9A9DA3;
			font-size: 12px;
			margin-top: .875rem;

			.item {
				margin-right: 5px;
			}
		}

		.user-icon-link {
			margin-top: 1.875rem;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.item {
				margin: 0 1rem;
				border: 1px solid;
				border-radius: 2.5rem;
				padding: 3px;
			}
		}
	}

	.user-info-detail {
		margin-top: 2rem;
		flex: 1;
		background: #fff;
	}
</style>